<template>
  <Card>
    <!-- 达成率查询 -->
    <Form :model="form" ref="form" :rules="rules" label-position="right" label-width="100" style="display: block;">
      <Row gutter="10">
        <i-col span="6">
          <FormItem label="选择渠道">
            <Select v-model="form.salechnl" clearable>
              <Option v-for="item in saleChannelList" :value="item.key" :key="item.key">{{ item.value }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="管理机构" prop="managecom">
            <Select v-model="form.managecom" clearable>
              <Option v-for="item in organizationList" :value="item.key" :key="item.key">{{ item.value }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="销售机构">
            <Select v-model="form.agentgroup" @on-change="val => getBranchmanager(val, { fileByte: 'branchmanager' })"
              clearable>
              <Option v-for="item in agentgroupList" :value="item.key" :key="item.key">{{ item.value }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="区部组">
            <Select v-model="form.branchmanager" clearable>
              <Option v-for="item in groupDistrictList" :value="item.key" :key="item.key">{{ item.value }}</Option>
            </Select>
          </FormItem>
        </i-col>
      </Row>
      <Row gutter="10">
        <i-col span="6">
          <FormItem label="达成率类型" prop="achievingRateType">
            <Select v-model="form.achievingRateType" clearable>
              <Option v-for="item in achievingRateTypeList" :value="item.key" :key="item.key">{{ item.value }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="专员工号">
            <Input v-model="form.agentcode" clearable placeholder="请输入" />
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="统计年月" prop="analyzeDate">
            <DatePicker v-model="form.analyzeDate" format="yyyy-MM" @on-change="val => $set(form, 'analyzeDate', val)"
              type="month" placeholder="请选择" />
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="选择交次" prop="payCount">
            <Select v-model="form.payCount" clearable>
              <Option v-for="item in payyearArr" :value="item.key" :key="item.key">{{ item.value }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="24" style="display: flex;justify-content: flex-end;">
          <Button type="primary" @click="loadResources" :loading="isLoading" icon="md-search"
            style="margin-right:20px;">查询</Button>
          <Button @click="resetForm(), getMonth()" icon="md-refresh">重置</Button>
          <!-- <Button @click="showDetail({})" icon="md-refresh">重置</Button> -->
        </i-col>
      </Row>
    </Form>

    <!-- form.managecom form.achievingRateType-->
    <!-- `${getManagecomName()}-${form.analyzeDate}-${form.payCount}-${getAchievingRateType()}.xlsx` -->
    <Button @click="checkMust() && batchExport({
      url: '/scrm-bhuer/api/export/AnalyzeExport',
      name: getName(),
      tableData: tableData,
      msg: '列表无数据，不可进行此操作！'
    })" :loading="exPortLoading">导出清单</Button>

    <Table class="sum-table" :columns="columns" :data="tableData" :loading="isLoading" show-summary
      :summary-method="handleSummary" style="margin-top:10px">
      <template slot-scope="{ row }" slot="showDetail">
        <span class="table-button" @click="showDetail(row)">查看详情</span>
      </template>
    </Table>

    <Page :total="ipagination.total" show-sizer show-total style="text-align:right;margin-top:20px"
      @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange"
      :page-size-opts="ipagination.pageSizeOptions" :current="ipagination.index" :page-size="ipagination.pageSize"
      transfer></Page>

    <Modal title="预估实收而未收保单" v-model="historyModal" width="700" footer-hide>
      <achievement-modal-table ref="achievementModalTable" :row.sync="row" @historyModalE="historyModalE" />
    </Modal>
  </Card>
</template>

<script>
import { loadResourcesMixin } from "../../util/mixins/loadResourcesMixin";
import { tableChangeMixin } from "../../util/mixins/tableChangeMixin";
import { getSelectListMixin } from "../../util/mixins/getSelectListMixin";
import achievementModalTable from "./compoents/achievementModalTable.vue";
import { batchExport } from "../../util/mixins/batchExportMixin";
export default {
  components: { achievementModalTable },
  name: "achievementRate",
  mixins: [
    loadResourcesMixin,
    tableChangeMixin,
    getSelectListMixin,
    batchExport,
  ],
  data() {
    return {
      mixinData: {
        tableAxios: "achievingRate",
        disableMixinCreated: true,
      },
      rules: {
        managecom: [
          {
            required: true,
            message: "请选择管理机构",
            trigger: "change",
          },
        ],
        achievingRateType: [
          {
            required: true,
            message: "请选择达成率类型",
            trigger: "change",
          },
        ],
        analyzeDate: [
          {
            required: true,
            message: "请选择统计年月",
            trigger: "change",
          },
        ],
        payCount: [
          {
            required: true,
            message: "请选择交次",
            trigger: "change",
          },
        ],
      },
      payyearArr: [
        { key: "1", value: "全部" },
        { key: "2", value: "二次" },
        { key: "3", value: "三次" },
        { key: "4", value: "四次及以上" },
      ],
      achievingRateTypeList: [
        { key: "1", value: "当月" },
        { key: "2", value: "宽一" },
        { key: "3", value: "宽末" },
      ],
      columns: [
        {
          title: "序号",
          type: "index",
          key: "index",
          align: "center",
          width: "70",
        },
        {
          title: "管理机构",
          key: "managename",
          align: "center",
          width: "200",
        },
        {
          title: "销售机构",
          key: "agentgroupname",
          align: "center",
          width: "200",
        },
        {
          title: "主管姓名",
          key: "branchmanagername",
          align: "center",
          width: "100",
        },
        {
          title: "专员姓名",
          key: "agentname",
          align: "center",
          width: "100",
        },
        {
          title: "专员工号",
          key: "agentcode",
          align: "center",
          width: "120",
        },
        {
          title: "渠道",
          key: "salechnlname",
          align: "center",
          width: "80",
        },
        {
          title: "统计年月",
          key: "analyzeDate",
          align: "center",
          width: "100",
        },
        {
          title: "应收件数",
          key: "receivableCount",
          align: "center",
          width: "100",
          allByte: "allReceivableCount",
        },
        {
          title: "应收保费",
          key: "receivables",
          align: "center",
          width: "100",
          allByte: "allReceivables",
        },
        {
          title: "实收件数",
          key: "receiptCount",
          align: "center",
          width: "100",
          allByte: "allReceiptCount",
        },
        {
          title: "实收保费",
          key: "receipts",
          align: "center",
          width: "100",
          allByte: "allReceipts",
        },
        {
          title: "件数达成率",
          key: "arCount",
          align: "center",
          width: "110",
          allByte: "allArCount",
        },
        {
          title: "保费达成率",
          key: "arPremium",
          align: "center",
          width: "110",
          allByte: "allArPremium",
        },
        {
          title: "综合达成率",
          key: "achievingRate",
          align: "center",
          width: "110",
          allByte: "allAchievingRate",
        },
        {
          title: "预估实收件数",
          key: "esReceiptCount",
          align: "center",
          width: "120",
          allByte: "allEsReceiptCount",
        },
        {
          title: "预估件数达成率",
          key: "esArCount",
          align: "center",
          width: "140",
          allByte: "allEsArCount",
        },
        {
          title: "预估实收保费",
          key: "esReceipts",
          align: "center",
          width: "120",
          allByte: "allEsReceipts",
        },
        {
          title: "预估保费达成率",
          key: "esArPremium",
          align: "center",
          width: "140",
          allByte: "allEsArPremium",
        },
        {
          title: "预估成功而未收",
          slot: "showDetail",
          align: "center",
          width: "140",
          fixed: "right",
        },
      ],
      columns1: [
        {
          title: "序号",
          type: "index",
          align: "center",
          // width: "70",
        },
        {
          title: "保单号",
          key: "contno",
          align: "center",
        },
        {
          title: "应交日",
          key: "payDate",
          align: "center",
        },
        {
          title: "应交保费",
          key: "receivables",
          align: "center",
        },
        {
          title: "保单状态",
          key: "contState",
          align: "center",
          slot: "states",
        },
      ],

      historyModal: false,
      allAchievingObj: {},
      row: {},
    };
  },
  created() {
    this.getMonth();
  },
  methods: {
    getName() {
      let getManagecom = "",
        payCount = "",
        achievingRateType = "";
      this.organizationList.forEach(
        (item) => item.key == this.form.managecom && (getManagecom = item.value)
      );
      this.payyearArr.forEach(
        (item) => item.key == this.form.payCount && (payCount = item.value)
      );
      this.achievingRateTypeList.forEach(
        (item) =>
          item.key == this.form.achievingRateType &&
          (achievingRateType = item.value)
      );

      return `${getManagecom}-${this.form.analyzeDate}-${payCount}-${achievingRateType}.xlsx`;
    },
    showDetail(row) {
      row.visitType = "0";
      // this.row = row;
      // this.$refs.achievementModalTable.row = row;
      this.$refs.achievementModalTable.form = JSON.parse(JSON.stringify(row));
      // this.$refs.achievementModalTable.loadResources();
      this.historyModalE()
    },
    historyModalE() {
      this.historyModal = true;
    },
    // 获取总计
    loadDataAfter() {
      this.apiB.allAchievingRate(this.form).then((res) => {
        if (res.code == 200) this.allAchievingObj = res.data;
        else this.$Message.info(res.msg);
      });
    },
    checkMust() {
      // console.log(this.form);
      let flag;
      this.$refs.form.validate((valid) => (flag = valid));
      return flag;
      // return true;
    },

    // 算总价
    handleSummary({ columns }) {
      const sums = {};
      columns.forEach((column, index) => {
        const key = column.key;
        if (index === 0) {
          sums[key] = {
            key,
            value: "合计",
          };
        } else if (column.allByte) {
          sums[key] = {
            key,
            value: this.allAchievingObj[column.allByte],
            // 100 + " 元" + column.allByte,
          };
        } else
          sums[key] = {
            key,
            value: "",
          };
      });
      // console.log("sums", sums);
      return sums;
    },
    getMonth() {
      let date = new Date(),
        year = date.getFullYear(),
        month = date.getMonth() + 1;
      this.$set(
        this.form,
        "analyzeDate",
        `${year}-${month > 9 ? month : "0" + month}`
      );
    },
  },
};
</script>

<style scoped>
.state-cls {
  width: 62px;
  height: 26px;
  border-radius: 2px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  line-height: 26px;
  text-align: center;
  margin: auto;
}

.state-cls-used {
  color: #14d595;
  background: rgba(20, 213, 149, 0.15);
}

.state-cls-no-used {
  background: #fff4ed;
  color: #f23031;
}

.state-cls-end {
  background: #eeeeee;
  color: #999999;
}
</style>
<style>
.sum-table>.ivu-table>div>.ivu-table-summary>.ivu-table-tbody>.ivu-table-row>.ivu-table-column-center {
  background: #fff6f4 !important;
  color: #ff4722 !important;
}
</style>
